<template>
  <div class="service">
    <div class="tou">服务</div>

    <!-- 服务页面 -->
    <div class="index-service">
      <!-- 车主服务 -->
      <div class="grid">
        <p>车主服务</p>
        <van-grid :border="false">
          <van-grid-item icon="shop" icon-color="#666" text="网点查询" />
          <van-grid-item icon="photo-o" text="电桩查询" />
          <van-grid-item icon="photo-o" text="道路救援" />
          <van-grid-item icon="photo-o" text="试驾预约" />
          <van-grid-item icon="photo-o" text="服务记录" />
          <van-grid-item icon="photo-o" text="服务预约" />
          <van-grid-item icon="photo-o" text="取送车" />
          <van-grid-item icon="photo-o" text="服务进度" />
        </van-grid>
      </div>
      <!-- 出行服务 -->
      <div class="chuxing">
        <p>出行服务</p>
        <img
          src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
          alt=""
        />
      </div>
      <!-- 用车工具 -->
      <div class="gongju">
        <p>用车工具</p>
        <van-grid :border="false" :column-num="3" :gutter="10">
          <van-grid-item>
            <van-image
              src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
            />
            <p>使用手册</p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
            />
            <p>保养手册</p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
            />
            <p>汽车知识</p>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 新品推荐 -->
      <div class="xinpin">
        <div class="xinpin-title">
          <p>新品推荐</p>
          <div class="gengduo">
            <span>更多</span>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="xinpin-body">
          <van-grid :border="false" :column-num="2" :gutter="10">
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
              />
              <span>宋 PLUS DM-i仿真</span>
              <span><van-icon name="points" />11500</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <!-- 美食天地 -->
      <div class="meishi">
        <div class="meishi-title">
          <p>美食天地</p>
          <div class="gengduo">
            <span>更多</span>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="meishi-body">
          <van-grid :border="false" :column-num="2" :gutter="10">
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
              />
              <span>宋 PLUS DM-i仿真</span>
              <span><van-icon name="points" />11500</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <!-- 家居日用 -->
      <div class="jiaju">
        <div class="jiaju-title">
          <p>家居日用</p>
          <div class="gengduo">
            <span>更多</span>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="jiaju-body">
          <van-grid :border="false" :column-num="2" :gutter="10">
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
              />
              <span>宋 PLUS DM-i仿真</span>
              <span><van-icon name="points" />11500</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              />
              <span>刀片电池概念杯</span>
              <span><van-icon name="points" />1980</span>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <!-- 加个div撑起距离底部的高度 -->
      <div style="height: 50px"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" src="../assets/css/service.scss" scoped></style>
